<template>
<div class="view ui-index" id="shuiyin" :class="[navMenuState ? 'navMenuState' : '']">
  <sidebar-nav></sidebar-nav>
  <called-bar></called-bar>
  <div id="wrap-page" style="display:none">
    <div v-if="isShow">
      <home-page></home-page>
    </div>
  </div>
  <!--来电弹屏-->
  <div id="call_interface_wrap">
    <div class="go-right" @click="goRight('call_interface_wrap')" v-show="goRLFlag">

      <i class="el-icon-arrow-right"></i>
    </div>
    <div id="turnCallIframeWidth" class="interface-ui-resizable-left"></div>
    <div class="innerMask" v-show="innerMaskFlag"></div>
    <call-iframe v-if="isCallInterface.status"></call-iframe>
  </div>
  <!--外呼弹屏-->
  <div id="call_out_interface_wrap">
    <div class="go-right" @click="goRight('call_out_interface_wrap')" v-show="goOutRLFlag">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div id="turnCallOutIframeWidth" class="interface-ui-resizable-left"></div>
    <div class="innerMask" v-show="innerMaskFlag"></div>
    <call-out-iframe v-if="isCallOutInterface.status"></call-out-iframe>
  </div>
  <div id="call_config_wrap" :class="{'navMenuState': navMenuState}">
    <iframe src="" frameborder="0" class="config-iframe" id="config-iframe" style="display: none"></iframe>
  </div>
  <!-- <RecordingNotification v-if='showSoundrecordingCard'></RecordingNotification> -->
  <keep-alive>
    <router-view ></router-view>
  </keep-alive>
  <accessWebchat  v-if="isShowChat"></accessWebchat>
</div>
</template>
<script>
  import sidebarNav from '@/components/public-modules/nav'
  import calledBar from '@/components/public-modules/phone-bar'
  import accessWebchat from '@/components/ui-modules/accessWebchat'
  import homePage from '@/components/business-modules/interface/HomePage.vue'
  import CallIframe from '@/components/business-modules/call/CallIframe.vue'
  import CallOutIframe from '@/components/business-modules/call/CallOutIframe.vue'
  import bus from '@/store/eventBus'
  import RecordingNotification from '@/components/public-modules/RecordingNotification/index.vue'
  import { _encryptPhone} from '@/utils/m7Utils.js'
  export default {
    name: 'Main',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        canvasObj: {
          container: document.getElementById('shuiyin'),
          width: '250px',
          height: '200px',
          textAlign: 'center',
          textBaseline: 'middle',
          font: '16px microsoft yahei',
          fillStyle: 'rgba(235, 235, 235, 0.6)',
          rotate: '-30',
          zIndex: 1
        },
        goRLFlag: true,
        goOutRLFlag: true,
        innerMaskFlag: false,
        callIframeLeft: 500
      }
    },
    computed: {
      // 是否展示在线咨询入口 判断是否是电商 私云 oem, 后端是否配置console地址 满足不展示
      isShowChat () {
        if (this.flag || this.$store.state.privatization || this.$store.state.oemObj.oemFlag || !this.$store.state.platform_urls.chatSdkUrl) {
          return false
        }
        return true
      },
      isShow () {
        return this.$store.state.isHomePage
      },
      isCallInterface () {
        return this.$store.state.isCallInterface
      },
      isCallOutInterface () {
        return this.$store.state.isCallOutInterface
      },
      navMenuState () {
        return this.$store.state.navMenuState
      },
      showSoundrecordingCard () {
        return this.$store.state.call.SoundrecordingCard.visible
      }
    },
    created () {
      if (this.isShowChat) {
        let im_hm = document.createElement("script")
        let head = document.getElementById('topHead')
        im_hm.src = this.$store.state.platform_urls.chatSdkUrl
        im_hm.async = "async";
        head.insertBefore(im_hm, head.firstChild)
      }
    },
    methods: {
      reloadHtml (obj) {
        let account = this.$store.state.session.account || {}
        if (account.watermark) {
          window.__canvasWM = this.__canvasWM(obj)
        }
        return false
      },
      __canvasWM (obj) {
        let account = this.$store.state.session.account || {}
        let _user = this.$store.state.session.user || {}
        obj.container = document.getElementById('shuiyin')
        var canvas = document.createElement('canvas')
        canvas.setAttribute('width', obj.width)
        canvas.setAttribute('height', obj.height)
        var ctx = canvas.getContext('2d')
        // 样式修改
        ctx.textAlign = obj.textAlign
        ctx.textBaseline = obj.textBaseline
        ctx.font = obj.font
        ctx.fillStyle = obj.fillStyle
        ctx.rotate(Math.PI / 180 * obj.rotate)
        if (account.content.indexOf('name') > -1 && _user.displayName) {
          ctx.fillText(_user.displayName, parseFloat(obj.width) / 2, parseFloat(obj.height) / 2)
        }
        if (account.content.indexOf('jobNumber') > -1 && _user.exten) {
          ctx.fillText(_user.exten, parseFloat(obj.width) / 2, parseFloat(obj.height) / 2 + 20)
        }
        if (account.content.indexOf('mobile') > -1 && _user.mobile) {
          ctx.fillText(_encryptPhone(_user.mobile), parseFloat(obj.width) / 2, parseFloat(obj.height) / 2 + 40)
        }
        var base64Url = canvas.toDataURL()
        const __wm = document.querySelector('.__wm')
        const watermarkDiv = __wm || document.createElement('div')
        const styleStr = `
          position: absolute;
          top: 50px;
          left: 0px;
          width: 100vw;
          height: 100%;
          z-index: ${obj.zIndex};
          pointer-events: none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`
        watermarkDiv.setAttribute('style', styleStr)
        watermarkDiv.classList.add('__wm')
        if (!__wm) {
          //  obj.container.style.position = 'relative'
          obj.container.insertBefore(watermarkDiv, obj.container.firstChild)
        }
        const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
        let that = this
        if (MutationObserver) {
          let mo = new MutationObserver(function () {
            const __wm = document.querySelector('.__wm')
            if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
              // 避免一直触发
              mo.disconnect()
              mo = null
              that.reloadHtml(that.canvasObj)
            }
          })
          mo.observe(obj.container, {
            attributes: true,
            subtree: true,
            childList: true
          })
        }
        // window.__canvasWM = this.__canvasWM(this.canvasObj)
      },
      startIdentify (turnBar, callInterfaceWrap) {    //  来电弹屏  拖动改变窗口大小
        let self = this
        turnBar.onmousedown = function (event) {
          self.innerMaskFlag = true
          let iframeLeft = callInterfaceWrap.offsetLeft
          let e = window.event || event
          self.currentX = e.clientX
          //  鼠标在滑块上的 move事件
          document.onmousemove = function (event) {
            let ee = window.event || event
            ee.preventDefault()
            let nowX = ee.clientX
            let disX = nowX - self.currentX
            let left = (iframeLeft + disX)
            if (left < 230) {
              left = 230
            }
            if (left > document.body.clientWidth - 200) {
              left = document.body.clientWidth - 200
            }
            self.callIframeLeft = left
            callInterfaceWrap.style.left = left + 'px'
          }
          // 鼠标左键抬起 重置 滑块
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
            self.innerMaskFlag = false
          }
        }
        return false
      },
      goLeft (paneNode) {   //   来电弹屏 展开
        let callInterfaceWrap = document.getElementById(paneNode)
        callInterfaceWrap.style.left = this.callIframeLeft + 'px'
        if (paneNode === 'call_out_interface_wrap') {
          this.goOutRLFlag = true
        } else {
          this.goRLFlag = true
        }
      },
      goRight (paneNode) {   //   来电弹屏 收起
        let callInterfaceWrap = document.getElementById(paneNode)
        callInterfaceWrap.style.left = (document.body.clientWidth) + 'px'
        if (paneNode === 'call_out_interface_wrap') {
          this.goOutRLFlag = false
        } else {
          this.goRLFlag = false
        }
      }
    },
    components: {
      accessWebchat,
      sidebarNav,
      calledBar,
      homePage,
      CallIframe,
      CallOutIframe,
      RecordingNotification
    },
    mounted () {
      this.reloadHtml(this.canvasObj)
      let turnBar = document.getElementById('turnCallIframeWidth')
      let turnOutBar = document.getElementById('turnCallOutIframeWidth')
      let callInterfaceWrap = document.getElementById('call_interface_wrap')
      let callOutInterfaceWrap = document.getElementById('call_out_interface_wrap')
      if (turnBar && callInterfaceWrap) {
        this.startIdentify(turnBar, callInterfaceWrap)    //  来电弹屏  拖动改变窗口大小
      }
      if (turnOutBar && callOutInterfaceWrap) {
        this.startIdentify(turnOutBar, callOutInterfaceWrap)    //  外呼  拖动改变窗口大小
      }
      bus.$on('callIframeGoLeft', (msg) => {
        this.goLeft('call_interface_wrap')
      })
      bus.$on('callOutIframeGoLeft', (msg) => {
        this.goLeft('call_out_interface_wrap')
      })
    },
    beforeDestroy () {
      bus.$off('callIframeGoLeft')
      bus.$off('callOutIframeGoLeft')
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../assets/common.styl"
.view
  margin 53px 0 0 56px
  box-sizing border-box
  background $c-back
  height calc(100vh - 52px)
.view.navMenuState
  margin 53px 0 0 120px
#call_interface_wrap, #call_out_interface_wrap
  display none
  position absolute
  top 52px
  right 0
  bottom 0
  left 500px
  z-index 12
  box-shadow -3px 0px 5px #ccc
  .interface-ui-resizable-left
    position absolute
    left -5px
    top 0
    height 100%
    width 14px
    cursor e-resize
  .innerMask
    position absolute
    width 100%
    height 100%
    left 0
    top 0
    z-index 10000
  .go-right
    width 24px
    height 50px
    text-align center
    z-index 1
    line-height 50px
    border-top-right-radius 5px
    border-bottom-right-radius 5px
    /*background $c-im-offline*/
    box-shadow 0px 0px 5px $c-im-offline
    position absolute
    left 0
    top 50%
    font-size 18px
    cursor pointer
    color $c-im-offline
    background-color #fff
    i
      font-size 18px
  .go-left
    left -20px
    border-top-right-radius 0px
    border-bottom-right-radius 0px
    border-top-left-radius 5px
    border-bottom-left-radius 5px
@-webkit-keyframes transIn {
  0% {
    -webkit-transform: translate(3000px,0);
    transform: translate(3000px,0);
  }
  100% {
    -webkit-transform: translate(0px,0);
    transform: translate(0px,0);
  }
}
@keyframes transIn {
  0% {
    -webkit-transform: translate(3000px,0);
    transform: translate(3000px,0);
  }
  100% {
    -webkit-transform: translate(0px,0);
    transform: translate(0px,0);
  }
}
.transIn {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: transIn;
  animation-name: transIn;
}
#call_config_wrap
  display none
  position absolute
  top 93px
  right 0
  bottom 0
  left 57px
  background #fff
  overflow hidden
  .config-iframe
    margin-top -62px
    margin-left -103px
    width calc(100% + 103px)
    height calc(100% + 62px)
#call_config_wrap.navMenuState
  left 115px
</style>
